<template>
  <div class="container">
    <div class="tips-title">1.区域加载 <span class="tips-explain">在表格等容器中加载数据时显示</span></div>
    <el-table :data="tableData" max-height="250" v-loading="loading1">
      <el-table-column fixed prop="id" label="ID" width="60"></el-table-column>
      <el-table-column prop="date" label="日期" width="160"></el-table-column>
      <el-table-column prop="name" label="姓名" width="160"></el-table-column>
      <el-table-column prop="province" label="省份" width="90"></el-table-column>
      <el-table-column prop="city" label="市区" width="90"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column prop="zip" label="邮编" width="160"></el-table-column>
    </el-table>
    <div class="tips-title">2.自定义 <span class="tips-explain">自定义加载文案、图标和背景色</span></div>
    <el-table
      :data="tableData"
      max-height="250"
      v-loading="loading1"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <el-table-column fixed prop="id" label="ID" width="60"></el-table-column>
      <el-table-column prop="date" label="日期" width="160"></el-table-column>
      <el-table-column prop="name" label="姓名" width="160"></el-table-column>
      <el-table-column prop="province" label="省份" width="90"></el-table-column>
      <el-table-column prop="city" label="市区" width="90"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column prop="zip" label="邮编" width="160"></el-table-column>
    </el-table>
    <div class="tips-title">3.整页加载</div>
    <el-button type="primary" @click="openFullScreen1" v-loading.fullscreen.lock="loading3">指令方式</el-button>
    <el-button type="primary" @click="openFullScreen2">服务方式</el-button>
    <br><br><br>
  </div>
</template>
<script>
  const testData = [
    {id: '1',date: '2020-05-03',name: 'bangZZ',province: '广东',city: '广州',address: '广州市花都区新华街',zip: 510800},
    {id: '2',date: '2020-05-02',name: 'bangZZ',province: '广东',city: '广州',address: '广州市白云区大金钟路',zip: 510000},
    {id: '3',date: '2020-05-01',name: 'bangZZ',province: '广东',city: '广州',address: '广州市白云区机场路1355号',zip: 510000},
    {id: '4',date: '2020-04-01',name: 'bangZZ',province: '上海',city: '浦东新区',address: '上海市浦东新区陆家嘴',zip: 200000},
    {id: '5',date: '2020-05-01',name: 'bangZZ',province: '上海',city: '黄埔区',address: '上海市黄埔区北京东路',zip: 200000},
    {id: '6',date: '2020-02-01',name: 'bangZZ',province: '上海',city: '黄埔区',address: '上海市浦东新区盛夏路',zip: 200000}
  ];
  export default {
    name: 'no-loading',
    data() {
      return {
        tableData: testData,
        loading1: true,
        loading3: false
      }
    },
    methods: {
      openFullScreen1() {
        this.loading3 = true;
        setTimeout(() => {
          this.loading3 = false;
        }, 2000);
      },
      openFullScreen2() {
        const loading = this.$loading({
          lock: true,
          text: '正在拼命加载中......',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
        }, 2000);
      }
    }
  }
</script>
<style>
</style>

